<template>
	<div id="tab-list">
		<el-table :data="List" border style="width: 100%">
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column prop="username" label="姓名">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="genderStr" label="性别">
			</el-table-column>
			<el-table-column prop="class_id" label="班级">
			</el-table-column>
			<el-table-column prop="created_at" label="创建时间">
			</el-table-column>
			<el-table-column prop="updated_at" label="更新时间">
			</el-table-column>
		</el-table>
	</div>
	<div id="pagination" style="float:right;margin-top: 20px;">
		<el-pagination background layout="total, prev, pager, next" :total="Total"
			@current-change="handleCurrentChange">
		</el-pagination>
	</div>
</template>

<script>
import axios from "axios";
const baseUrl = "http://127.0.0.1:8080";

const pagination = {
	pageNum: 1,		// 当前页
	pageSize: 10, 	// 每页条数

}

export default {
	data() {
		return {
			List: [],
			Total: 0,
		}
	},
	created() {
		this.StudentList();
	},
	methods: {
		TestFunc() {
			alert("hello")
		},
		StudentList() {
			const instance = axios.create({
				baseURL: `${baseUrl}`,
				timeout: 1000,
				headers: {}
			});
			instance.get('/student/list?page_num=' + pagination.pageNum + '&page_size=' + pagination.pageSize).then(res => {
				if (res.data.code == 0) {
					this.List = res.data.data.list
					this.Total = res.data.data.total

					let i = 0
					for (i=0; i<=this.List.length; i++) {
    					if (this.List[i].gender == 1) {
							this.List[i].genderStr = "男"
						} else {
							this.List[i].genderStr = "女"
						}
					}
					console.log(this.List)
				} else {
					this.$message.error(res.data.message);
				}
			}).catch((err) => {
				console.log("catch", err);
			});
		},
		handleCurrentChange(pageNum) {
			pagination.pageNum = pageNum
			this.StudentList()
		}
	},
}
</script>